<template>
	<view>
		<topicInfo :info='info'></topicInfo>
		<divider/>
		<view class="p-2 flex border-bottom" hover-class="bg-light" v-for="(item,index) in hotList" :key='index'>
			<text class="iconfont icon-xihuan text-main mx-3"></text>
			<text class="font text-ellipsis pr-2">{{item.title}}</text>
		</view>
		<divider/>
		<view class="flex align-center mb-1">
			<text 
			v-for="(item,index) in tab"
			:key="index"
			class="flex-1 flex align-center justify-center"
			@click="tabClick(index)"
			:class="tabIndex === index ? 'font-lg text-main font-weight-bold' : 'font-md'"
			>{{item.name}}</text>
		</view>
		<template v-if="listDate.length > 0">
			<block v-for="(item,index) in listDate" :key="index">
				<commonList :item="item" :index="index"></commonList>
				<divider/>
			</block>
		</template>
		<template v-else>
			<noThing/>
		</template>
		<!-- 上拉加载更多 -->
		<loadmore :loadmore="loadtext"></loadmore>
	</view>
</template>

<script>
	import topicInfo from '@/components/topicDetail/topicInfo.vue';
	import commonList from '@/components/common/common-list.vue';
	import noThing from '@/components/common/nothing.vue';
	import loadmore from '@/components/common/loadmore.vue';
	export default{
		components:{topicInfo,commonList,noThing,loadmore},
		data() {
			return {
				info:{},
				hotList:[{
					title:'【新人必读】 uni-app实战第二季商城类项目开发'
				},{
					title:'【新人必读】 uni-app实战第三季仿微信app开发'
				}],
				// 默认列表
				list1:[],
				loadtext1:'上拉加载更多',
				page1:1,
				firstLoad1:false,
				// 最新列表
				list2:[],
				loadtext2:'上拉加载更多',
				page2:1,
				firstLoad2:false,
				tab:[{
					name:'默认'
				},{
					name:'最新'
				}],
				tabIndex:0
			}
		},
		onLoad(e) {
			if (e.detail) {
				let res = JSON.parse(e.detail)
				this.info = res
				uni.setNavigationBarTitle({
					title:this.info.title
				})
			}
			this.getData()
		},
		computed:{
			// 当前列表数据
			listDate() {
				if (this.tabIndex === 0) {
					return this.list1
				} else {
					return this.list2
				}
			},
			loadtext() {
				if (this.tabIndex === 0) {
					return this.loadtext1
				}
				return this.loadtext2
			}
		},
		// 触底触发
		onReachBottom() {
			this.loadmore()
		},
		methods:{
			// tab切换
			tabClick(index){
				this.tabIndex = index
				if (!this['firstLoad' + index + 1]) {
					this.getData()
				}
			},
			getData() {
				let no = this.tabIndex + 1
				let page = this['page'+no]
				let isfresh = this.page === 1
				this.$H.get('/topic/'+this.info.id+'/post/'+page).then(res => {
					let list = res.list.map(v => {
						// 目的是让后台的数据与之前的数据名称一致
						return this.$U.formatCommonList(v)
					})
					// 如果是第一页 直接赋值  如果不是  需要将所有数据一起赋值
					this['list'+no] = isfresh ? list : [...this['list'+no], ...list],
					// 数据小于10条 后面就没有数据了
					this['loadtext'+no] = list.length < 10 ? '没有更多了' : '上拉加载更多'
					if(isfresh) {
						this['firstLoad'+no] = true
					}
				})
			},
			loadmore() {
				let index = this.tabIndex
				let no = index + 1
				if (this.loadtext !== '上拉加载更多') return
				this['loadtext' + (index + 1)] = '加载中...'
				this['page' + no]++
				this.getData()
			}
		}
	}
</script>

<style>
	
</style>
